<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圆形</title>
  </head>
  <body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      ctx.beginPath();
      ctx.lineWidth = 2;
      ctx.strokeStyle = "green"; // 边框色
      ctx.fillStyle = "blue"; // 填充色
      // x 坐标（圆心）
      // y 坐标（圆心）
      // 半径
      // 开始绘制圆弧的角度 0 表示正 x 轴，顺时针方向
      // 结束绘制圆弧的角度（按照从 0 到 2π（即 360 度）的角度进行绘制。）
      ctx.arc(200, 200, 150, 0, 2 * Math.PI); // 绘制圆形
      ctx.stroke(); // 绘制圆形的边框
    </script>
  </body>
</html>
